
<template>
  <div>
    <el-dialog
      title="接警人关联安装点"
      :visible.sync="dialogVisible"
      width="800px"
      top="10vh"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <div class="header">
        <div class="left">
          <!-- <div class="label">
            姓名：<span class="name">{{ spaceData.name }}</span>
          </div>
          <div class="label">
            联系电话：<span class="name">{{ spaceData.mobile }}</span>
          </div> -->
        </div>
        <div class="right">
          <el-button size="small" icon="el-icon-plus" @click="addClick"
            >新增</el-button
          >
          <el-button size="small" icon="el-icon-delete" @click="batchDelClick"
            >批量删除</el-button
          >
        </div>
      </div>
      <div class="content">
        <el-table
          :data="dataList"
          class="table"
          height="370"
          ref="refTable"
          row-key="id"
          :header-cell-style="headerStyle"
          @selection-change="batchSelect"
        >
          <el-table-column
            align="center"
            type="selection"
            :reserve-selection="true"
            width="60"
          >
          </el-table-column>

          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="80"
            height="30"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="spaceName"
            label="安装点"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="level"
            label="接警人级别"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-if="scope.row.level == 1">一级</span>
              <span v-if="scope.row.level == 2">二级</span>
              <span v-if="scope.row.level == 3">三级</span>
              <span v-if="scope.row.level == 4">四级</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="100">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="bottom"
              >
                <i
                  @click="delClick(scope.row)"
                  class="iconfont shanchu tableBtnIcon"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :page.sync="page"
          :limit.sync="limit"
          :total="total"
          @pagination="getDataList"
          class="pagination"
        ></pagination>
      </div>
    </el-dialog>
    <space-add ref="refAdd" :receiverInfo="spaceData"></space-add>
  </div>
</template>

<script>
import { reqSpaceReceiverList, reqSpaceReceiverBatchDel } from "@/api/api";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";
import SpaceAdd from "./SpaceAdd.vue";
export default {
  props: {
    spaceData: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    Pagination,
    SpaceAdd,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      dialogVisible: false,
      page: 1,
      limit: 10,
      total: 0,
      dataList: [],
      batchDataList: [], //批量操作勾选的数据
    };
  },
  computed: { ...mapState(["user"]) },
  watch: {
    spaceData(val) {
      this.getDataList();
    },
  },
  methods: {
    // 接警人空间列表
    async getDataList() {
      this.loading = true;
      let params = {
        id: this.spaceData.id,
        // level:this.spaceData.level||''
      };
      const res = await reqSpaceReceiverList(this.page, this.limit, params);
      this.loading = false;
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataList = res.data.rows;
      this.total = res.data.total;
    },
    getInitDataList() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
      this.clearSelections();
    },
    // 新增
    addClick() {
      this.$refs.refAdd.dialogVisible = true;
      this.$refs.refAdd.getBuildList();
    },
    // 删除
    async delClick(row) {
      const result = await this.$confirm(
        `此操作将删除关联安装点：${row.spaceName}, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      this.reqDelFun([row.id]);
    },
    // 点击复选框触发，可跨分页选择
    batchSelect(arr) {
      this.batchDataList = arr;
    },
    // 批量删除
    async batchDelClick() {
      let { batchDataList } = this;
      if (batchDataList.length <= 0)
        return this.$modal.notifyWarning("请先勾选需要删除的安装点");
      const result = await this.$confirm(
        "此操作将删除勾选的安装点, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      let arrId = batchDataList.map((item) => {
        return item.id;
      });
      this.reqDelFun(arrId);
    },
    // 清空复选框√√
    clearSelections() {
      this.$refs.refTable.clearSelection();
    },
    // 请求删除
    async reqDelFun(idList) {
      const res = await reqSpaceReceiverBatchDel({ idList });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("删除成功");
      this.getInitDataList();
    },

    // 点击关闭弹框
    closeDialog() {
      this.dialogVisible = false;
    },
  },
  deactivated() {
    this.closeDialog();
  },
};
</script>

<style lang="less" scoped>
// @import url("../../common.less");
@import url("~@views/style/tablePage.less");
.header {
  display: flex;
  justify-content: space-between;
  .left {
    font-size: 15px;
    color: @primaryTxtcolor;
    // margin-bottom: 20px;
    display: flex;
    justify-content: center;
    .label {
      margin: 0 10px;
      .name {
        font-size: 16px;
      }
    }
  }
  .right {
    margin-right: 10px;
  }
}
</style>